<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				box-sizing: border-box;
			}
			
			body {
				/*内外边距          画框要点先画行再画列          float浮动元素不占位子     
				 * static 正常文档布局  占位子  参照物是元素的父容器
				 * relative   相对于原来的位子改变（参照物是原来的位子）       元素本身是要占位子
				 * position:absolute 绝对定位也不占位子（参照物是整个文档-html标签）     
				 * fixrd   固定定位不占位子 参照物是浏览器的视口（可视化窗口）
				 * z-index 写完上面的层叠在哪里
				 *   */
				margin: 0;
				padding: 0;
				text-align: center;
				position: relative;
				min-width: 1200px;
			}
			
			.content {
				width: 100%;
				height: 1200px;
				background-image: url(img/rp.jpg);
				/*不是平铺的意思   就是不重复下去*/
				background-repeat: no-repeat;
				/*图片的位置  center水平  top顶上*/
				background-position: center top;
				position: absolute;
				z-index: -1;
			}
			
			#head {
				/*用线来更清楚的看见逻辑标签*/
				border: 1px solid red;
				height: 40px;
			}
			
			#head-menu {
				border: 1px solid red;
				height: 774px;
				width: 1200px;
				margin: 0 auto;
				padding-top: 40px;
			}
			/*#list{
				border: 1px solid red;
				height: 38px;
				width: 1120.75px;
				margin: 0 auto;
				font-size: 1.5em;
				
			}*/
			
			.kaitou {
				width: 1100px;
				/*height: 20px;*/
				border: 1px solid green;
				/*padding内容*/
				padding: 50px;
				margin: 0 auto;
			}
			
			.kaitou li {
				display: block;
				height: 100%;
				width: 140px;
				float: left;
				border: 1px solid wheat;
				list-style: none;
				/*margin: 25px;*/
			}
			/*主体*/
			
			#main {
				border: 1px solid red;
				height: 3038px;
				width: 1200px;
				margin: 0 auto;
			}
			
			#adv {
				border: 1px solid red;
				height: 674px;
				/* 下面留空白   margin-bottom:25px*/
			}
			
			#adv-left {
				border: 1px solid red;
				width: 379px;
				height: 652px;
				/*从左往右排*/
				float: left;
			}
			
			#adv-left-above {
				height: 256px;
				border: 1px solid yellow;
			}
			
			#adv-left-l {
				width: 188px;
				height: 110px;
				border: 1px solid yellow;
				float: left;
			}
			
			#adv-left-2 {
				width: 188px;
				height: 110px;
				border: 1px solid blue;
				float: right;
			}
			
			#adv-left-below {
				width: 379px;
				height: 264px;
				border: 1px solid blue;
				float:inherit;
			}
			
			#adv-rigth {
				border: 1px solid red;
				width: 801px;
				height: 652px;
				float: right;
			}
			
			#stategy {
				border: 1px solid red;
				height: 522px;
				/* 上面留空白  margin-top: 50px;*/
			}
			#stategy-image{
				height: 122px;
				float: left;
			}
			.diyi:hover{
				background-image: url(img/1510187342552564846.jpg);
			}
			
			
			#intro {
				border: 1px solid red;
				height: 789px;
				/*	width: 1920px;*/
				/*margin-left: -30%;*/
			}
			
			#ask {
				border: 1px solid red;
				height: 579px;
			}
			
			#clan {
				border: 1px solid red;
				height: 470px;
			}
			
			#footer {
				border: 1px solid red;
				height: 375px;
			}
		</style>

	</head>

	<body>
		<!--
        	作者：陈强
        	时间：2017-12-11
        	描述：页头
        -->
		<div id="head">

		</div>
		<div class="content">

			<div id="head-menu">
				<ul class="kaitou ">
					<li><a href="">首页</a></li>
					<li><a href="">新闻资讯</a></li>
					<li><a href="">仙友攻略站</a></li>
					<li><a href="">新手指引</a></li>
					<li><a href="">风云志</a></li>
					<li><a href="">游戏论坛</a></li>
					<li><a href="">CDK兑换</a></li>
				</ul>
			</div>

			<div id="main">
				<!--活动公告区-->
				<div id="adv">
					<!--左边边框-->
					<div id="adv-left">
						<div id="adv-left-above">

						</div>
						<div id="adv-left-l">

						</div>
						<div id="adv-left-2">

						</div>
						<div id="adv-left-below">

						</div>
					</div>
					<!--右边边框-->
					<div id="adv-rigth">

					</div>

				</div>
				<!--/*攻略区*/-->
				<div id="stategy">
                     <div id="stategy-image">
	                    <a class="diyi"><img src="img/1510187428470599561.jpg"  alt=""></a> 
	                    <img src="img/1510279216819245438.jpg"  alt=""> 
	                    <img src="img/1509648420859090566.jpg"	alt="">
	                    <img src="img/1510204562555596749.jpg"	alt="">	
                        </div>
				</div>
				<!--图片简介-->
				<div id="intro">

				</div>
				<!-- 详情-->
				<div id="ask">

				</div>
				<!--部落-->
				<div id="clan">

				</div>

			</div>
			<div id="footer">

			</div>
		</div>
	</body>

</html>